<template>
  <div class="approve-page">
    <div class="approve-header">
      <h2><i class="el-icon-s-check"></i> 学生岗位申请审批</h2>
      <p class="approve-desc">可对学生的岗位申请进行审批操作</p>
    </div>
    <el-card class="approve-card">
      <el-table :data="sortedTableData" style="width: 100%; margin-top: 10px;" border stripe>
        <el-table-column prop="positionName" label="岗位名称" min-width="120" />
        <el-table-column prop="studentName" label="学生姓名" min-width="100" />
        <el-table-column prop="reason" label="申请理由" min-width="180" />
        <el-table-column prop="schedule" label="意向时间" min-width="120" />
        <el-table-column prop="status" label="状态" min-width="90">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.status)" effect="dark">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button v-if="row.status === 0" type="primary" size="small" @click="openApproveDialog(row, 1)">通过</el-button>
            <el-button v-if="row.status === 0" type="danger" size="small" @click="openApproveDialog(row, 2)">拒绝</el-button>
            <el-button v-else size="small" disabled>{{ statusText(row.status) }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, jumper, sizes, ->, total"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="审批意见" width="400px" :close-on-click-modal="false">
      <el-form :model="dialogForm">
        <el-form-item label="审核意见">
          <el-input v-model="dialogForm.suggestion" type="textarea" placeholder="可填写审核意见（可为空）" maxlength="200" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApprove">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const tableData = ref([])
const dialogVisible = ref(false)
const dialogForm = ref({ id: null, status: null, suggestion: '' })

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

function statusText(status) {
  if (status === 0) return '审核中'
  if (status === 1) return '已通过'
  if (status === 2) return '未通过'
  return '未知'
}
function statusTagType(status) {
  if (status === 0) return 'warning'
  if (status === 1) return 'success'
  if (status === 2) return 'danger'
  return 'info'
}

// 排序：审核中>已通过>未通过
const sortedTableData = computed(() => {
  return [...tableData.value].sort((a, b) => {
    // 0最前，1其次，2最后
    if (a.status !== b.status) {
      return a.status - b.status
    }
    return 0
  })
})

function handleSizeChange(val) {
  pageSize.value = val
  currentPage.value = 1
  fetchApplications(1)
}

async function fetchApplications(page = 1) {
  const res = await request.get('/api/application/teacher-list', {
    params: { page, size: pageSize.value }
  })
  if (res.code === 0) {
    tableData.value = res.data.records || res.data.list || res.data || []
    total.value = res.data.total || res.data.count || 0
  } else {
    tableData.value = []
    total.value = 0
  }
}

function openApproveDialog(row, status) {
  dialogForm.value = { id: row.id, status, suggestion: '' }
  dialogVisible.value = true
}

async function submitApprove() {
  const { id, status, suggestion } = dialogForm.value
  dialogVisible.value = false
  const res = await request.post('/api/application/approve', { id, status, suggestion })
  if (res.code === 0) {
    ElMessage.success('操作成功')
    fetchApplications(currentPage.value)
  } else {
    ElMessage.error(res.message || '操作失败')
  }
}

function handlePageChange(page) {
  currentPage.value = page
  fetchApplications(page)
}

onMounted(() => {
  fetchApplications()
})
</script>

<style scoped>
.approve-page {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 32px 0;
}
.approve-header {
  max-width: 1200px;
  margin: 0 auto 24px auto;
  padding: 24px 32px 12px 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.approve-header h2 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.approve-desc {
  color: #888;
  font-size: 15px;
  margin: 0;
}
.approve-card {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  border: none;
  background: #fff;
  padding: 24px 0 8px 0;
}
.el-table {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.el-table th {
  background: #f4f6fa;
  color: #333;
  font-weight: 600;
}
.el-table .el-button {
  border-radius: 6px;
  font-weight: 500;
  box-shadow: none;
}
.el-table .el-button--primary {
  background: #6cb6f7;
  border: none;
}
.el-table .el-button--danger {
  background: #ffeaea;
  color: #f56c6c;
  border: none;
}
.el-table .el-button[disabled] {
  background: #f0f0f0;
  color: #aaa;
}
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin: 24px 16px 0 0;
}
.el-dialog {
  border-radius: 12px;
}
</style> 